<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>task07</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <section>
            <img src="./img/logo.png" alt="logo">
            <h1>新世界</h1>
        </section>
        <div class="login">
            <img src="./img/login.png" alt="login">
            <p>登录</p>
        </div>
        <nav>
            <dl>
                <dd>首页</dd>
                <dd>最新活动</dd>
                <dd>项目介绍</dd>
                <dd>爱心社区</dd>
                <dd>关于我们</dd>
            </dl>
        </nav>
        <div class="clearfix"></div>
    </header>
    <div class="content">
        <div class="banner-lg">
            <img class="layer-black" src="./img/layer-black.png" alt="">
            <p class="en">Time of new life</p>
            <p class="cn-one">新时代，年轻的人们让我们一起</p>
            <p class="cn-two">体验新生活，享受新生活</p>
            <button>开始体验</button>
        </div>
        <div class="bar">
            <dl class="img">
                <dd>
                    <img src="./img/circle.png" alt="circle">
                </dd>
                <dd>
                    <img src="./img/flag.png" alt="flag">
                </dd>
                <dd>
                    <img src="./img/flower.png" alt="flower">
                </dd>
                <dd>
                    <img src="./img/square.png" alt="square">
                </dd>
                <div class="clearfix"></div>
            </dl>
            <dl class="text">
                <dd>
                    <p>打造全新世界观，让你更爱你的生活</p>
                </dd>
                <dd>
                    <p>丰富多彩的公益活动，发挥新世界的主人公意识</p>
                </dd>
                <dd>
                    <p>时尚的新理念，超前体验未知的生活</p>
                </dd>
                <dd>
                    <p>完善的培养机制，培养你全新的世界观</p>
                </dd>
                <div class="clearfix"></div>
            </dl>
        </div>
        <div class="banner-sm">
            <img src="./img/logo.png" alt="logo">
            <p>关于新世界，你不知道的还有什么？</p>
        </div>
        <div class="city-picker-wrapper">
            <img class="layer-red" src="./img/layer-red.png" alt="">
            <h2>查找新世界城市活动信息</h2>
            <p>每个城市都有不同的活动信息，请自主查询您所要了解的城市</p>
            <dl class="city-picker">
                <dd>
                    <input id="country" class="select" type="text" value="" placeholder="国家" readonly="readonly">
                    <ul class="option-list country">
                        <li class="option">中国</li>
                        <li class="option">美国</li>
                        <li class="option">英国</li>
                    </ul>
                </dd>
                <dd>
                    <input id="province" class="select" type="text" value="" placeholder="省份" readonly="readonly">
                    <ul class="option-list province">
                        <li class="option">吉林省</li>
                        <li class="option">黑龙江省</li>
                        <li class="option">辽宁省</li>
                    </ul>
                </dd>
                <dd>
                    <input id="city" class="select" type="text" value="" placeholder="城市" readonly="readonly">
                    <ul class="option-list city">
                        <li class="option">长春</li>
                        <li class="option">吉林</li>
                        <li class="option">四平</li>
                        <li class="option">梅河口</li>
                    </ul>
                </dd>
                <dd>
                    <button>搜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;索</button>
                </dd>
            </dl>
        </div>
        <div class="activity">
            <dl>
                <dd>
                    <div class="img-wrapper">
                        <img src="http://omcbb8o2a.bkt.clouddn.com/image/baidu-ife/XiaoweiSchool/task7/beijing_act.png" alt="activity">
                    </div>
                    <h3>北京活动</h3>
                    <p>新社区大联盟</p>
                </dd>
                <dd>
                    <h3>上海活动</h3>
                    <p>夜上海新景观探索</p>
                    <div class="img-wrapper">
                        <img src="http://omcbb8o2a.bkt.clouddn.com/image/baidu-ife/XiaoweiSchool/task7/shanghai_act.png" alt="activity">
                    </div>
                </dd>
                <dd>
                    <div class="img-wrapper">
                        <img src="http://omcbb8o2a.bkt.clouddn.com/image/baidu-ife/XiaoweiSchool/task7/shenzhen_act.png" alt="activity">
                    </div>
                    <h3>深圳活动</h3>
                    <p>全新海岸线观点站</p>
                </dd>
                <dd>
                    <div class="img-wrapper">
                        <img src="http://omcbb8o2a.bkt.clouddn.com/image/baidu-ife/XiaoweiSchool/task7/hongkong_act.png" alt="activity">
                    </div>
                    <h3>香港活动</h3>
                    <p>奢侈消费大派送</p>
                </dd>
                <div class="clearfix"></div>
            </dl>
        </div>
    </div>
    <div class="carousel">
        <div class="carousel-left">
            <h2>新世界</h2>
            <h2>TIME</h2>
            <p>@新世界 — 北京</p>
            <p>2016.04.01</p>
            <span></span>
        </div>
        <div class="carousel-right">
            <h2>
                新世界/
                <p>01</p>
            </h2>
            <p>新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</p>
            <button>更多详情</button>
            <div class="point-list">
                <span class="solid"></span>
                <span class="hollow"></span>
                <span class="hollow"></span>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="about-us">
        <div class="about-us-left">
            <p>新生活</p>
            <p>关于爱生活的我们</p>
            <button>查看更多</button>
        </div>
        <div class="about-us-mid">
            <p>新生活</p>
            <p>关于爱生活的我们</p>
            <button>查看更多</button>
        </div>
        <div class="about-us-right">
            <span></span>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="join-us">
        <div class="join-us-title">
            <h2>成为我们的志愿者</h2>
            <p>新世界的大家庭需要每一个爱生活的人加入，如果你够年轻，有梦想，有激情</p>
            <p>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
        </div>
        <div class="join-us-left">
            <dl>
                <dd>
                    <h2>新世界志愿者协议</h2>
                    <p>加入新世界志愿者的人员必须遵守中华人民共和国的<br>相关法律法规，并且本着平等资源的原则......</p>
                    <p>∨ more</p>
                </dd>
                <dd>
                    <h2>新世界志愿者权利</h2>
                    <p>新世界志愿者享受新世界内部所有资源共享的权利，并<br>且享受所在城市新世界活动的优先参与资格......</p>
                    <p>∨ more</p>
                </dd>
                <dd>
                    <h2>更多条款</h2>
                    <p>∨ more</p>
                </dd>
            </dl>
        </div>
        <div class="join-us-right">
            <form action="">
                <dl>
                    <dd>
                        <input type="text" placeholder="姓名:">
                        <input type="text" placeholder="年龄:">
                    </dd>
                    <dd>
                        <input type="text" placeholder="联系方式:">
                        <input type="text" placeholder="联系地址:">
                    </dd>
                    <dd>
                        <textarea name="" id="" cols="30" rows="10" placeholder="请简单描述你的梦想生活"></textarea>
                    </dd>
                    <dd>
                        <button>提交申请</button>
                    </dd>
                </dl>
            </form>
        </div>
    </div>
    <div class="contact-us">
        <h2>联系我们</h2>
        <p>为了更好的获取我们最新的产品咨询，您可以留下您的电子邮箱快速订阅我们的产品咨询<br>也可以通过以下任何方式关注我们的动态</p>
        <input type="text" placeholder="someone@email.com"><button>提交</button>
        <dl>
            <dd class="qq"></dd>
            <dd class="weibo"></dd>
            <dd class="twitter"></dd>
            <dd class="tianya"></dd>
            <div class="clearfix"></div>
        </dl>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/select.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>